<!--  -->
<template>
  <div class="student">
    <h1>学生组件</h1>
    <div>
      <input type="text" v-model="changeName" />
      <input type="button" value="修改" @click="editStuName" />
    </div>
    <h2 class="cc">学生姓名:<span class="yy">{{ stuName }}</span></h2>
    <h2>所属年级:<span class="yy">{{ grade }}</span></h2>
    <h2>所属班级:{{ cls }}</h2>
    <h2>所属学校:{{ school }}</h2>
    <h2>年龄:{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //第一种方式（只接收）
  // props:['stuName','grade','cls'],

  //第二种方式（限制类型）
  // props: { stuName: String, grade: String, cls: String, age: Number },

  //第三种方式（限制类型、限制必要性、指定默认值）
  props: {
    stuName: {
      type: String, //name 的类型是字符串
      required: true, //name 是必要的
    },
    grade: {
      type: String, //name 的类型是字符串
      default: "M78星云", // 默认值是'M78星云'
    },
    cls: {
      type: String, //name 的类型是字符串
    },
    age: {
      type: Number,
      default: 200,
    },
  },
  data() {
    //这里存放数据
    return {
      school: "盐城机电",
      changeName: "",
    };
  },

  methods: {
    // 修改学生姓名
    editStuName() {
      console.log("学生组件修改了学生姓名===>" + this.stuName);
      // this.$emit("xxx", this.changeName);
      this.$emit("xxx", this.changeName, 100);
    },
  },
};
</script>
<style scoped lang="less">
.student {
  background-color: rgb(17, 233, 211);
  .cc {
    color: red;
    .yy{
      color: rgb(229, 212, 29);
    }
  }
  .yy{
    color: burlywood;
  }
}
</style>